<template>
  <div class="detail">
    <p class="back"><span class="el-icon-arrow-left"
                          @click="goBack">返回</span> / <span>查看</span></p>
    <el-row :gutter="20">
      <el-col :span="5">
        <el-card class="box-card">
          <h4>基本信息</h4>
          <div class="box1">
            <div class="txt">
              <p>送检单位名称:</p>
              <span :title="patient.sjdwName">{{patient.sjdwName}}</span>
            </div>
            <div class="txt">
              <p>受检人姓名:</p>
              <span>{{patient.patientName}}</span>
            </div>
            <div class="txt">
              <p>受检人性别:</p>
              <span>{{patient.patientSex}}</span>
            </div>
            <div class="txt">
              <p>受检人年龄:</p>
              <span>{{patient.patientAge}}</span>
            </div>
          </div>
          <div class="box1">
            <div class="txt">
              <p>配偶姓名:</p>
              <span>{{patient.mateName}}</span>
            </div>
            <div class="txt">
              <p>配偶性别:</p>
              <span>{{patient.mateSex}}</span>
            </div>
            <div class="txt">
              <p>配偶年龄:</p>
              <span>{{patient.mateAge}}</span>
            </div>
          </div>
          <div class="box1">
            <div class="txt">
              <p>受检人核型:</p>
              <span>{{patient.patientKaryotype}}</span>
            </div>
            <div class="txt">
              <p>配偶核型:</p>
              <span>{{patient.mateKaryotype}}</span>
            </div>
            <div class="txt">
              <p>男方父亲核型:</p>
              <span>{{patient.karyotypeMFa}}</span>
            </div>
            <div class="txt">
              <p>男方母亲核型:</p>
              <span>{{patient.karyotypeMMo}}</span>
            </div>
            <div class="txt">
              <p>女方父亲核型:</p>
              <span>{{patient.karyotypeMMo}}</span>
            </div>
            <div class="txt">
              <p>女方母亲核型:</p>
              <span>{{patient.karyotypeWMo}}</span>
            </div>
            <div class="txt">
              <p>其他染色体/核型信息:</p>
              <span>{{patient.otherChromosome}}</span>
            </div>
            <div class="txt">
              <p>基因:</p>
              <span>{{patient.gene}}</span>
            </div>
            <div class="txt">
              <p>遗传模式:</p>
              <span>{{patient.ycms}}</span>
            </div>
            <div class="txt">
              <p>突变位点:</p>
              <span>{{patient.chgvs}}</span>
            </div>
            <div class="txt">
              <p>培养液采集方案:</p>
              <span>{{patient.pyySolution}}</span>
            </div>
            <div class="txt">
              <p>受精方式</p>
              <span>{{patient.sjfs}}</span>
            </div>
            <div class="txt">
              <p>胚胎信息:</p>
              <span>{{patient.ptInfo}}</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="19">
        <el-card class="box-card">
          <div class="btn">
            <el-button v-for="item in date"
                       :class="item.receive_sample_date==active?'active':''"
                       @click="datechange(item)"
                       :key="item.receive_sample_date">{{
            item.receive_sample_date
          }}</el-button>
          </div>
          <div class="infor">
            <p> <span>收样日期:</span> {{item.receiveSampleDate}}</p>
            <p> <span>销售员:</span> {{item.saleman}}</p>
            <p> <span>送检码:</span> {{item.sampleBoxCode}}</p>
            <p> <span>运输状态:</span> {{item.sendStatus}}</p>
            <p> <span>送检编号:</span> {{item.sampleSerialNumber}}</p>
            <p> <span>温度:</span> {{item.temperature}}</p>
            <p> <span>产品英文简写:</span> {{item.sampleDecWay}}</p>
            <p> <span>送检医生:</span> {{item.sjys}}</p>
            <p> <span>其他信息:</span> {{item.otherChromosome}}</p>

          </div>
          <el-table :data="tableData"
                    style="width: 100%"
                    height="calc(100vh - 330px)"
                    :show-overflow-tooltip="true"
                    stripe>
            <el-table-column prop="sampleId"
                             label="样本编号"
                             :style="{ width: '10%' }"
                             align="center">
            </el-table-column>
            <el-table-column prop="sjdwName"
                             label="送检单位名称"
                             :style="{ width: '10%' }"
                             align="center">
            </el-table-column>
            <el-table-column prop="sampleType"
                             label="样本类型"
                             :style="{ width: '10%' }"
                             align="center">
            </el-table-column>
            <el-table-column prop="sampleDecWay"
                             label="产品英文简称"
                             :style="{ width: '10%' }"
                             align="center">
            </el-table-column>
            <el-table-column prop="sampleCode"
                             label="收样编号"
                             :style="{ width: '10%' }"
                             align="center">
            </el-table-column>
            <el-table-column prop="sampleLevel"
                             label="形态学评级"
                             :style="{ width: '10%' }"
                             align="center">
            </el-table-column>

            <el-table-column prop="resultExplain"
                             label="结果解释"
                             :style="{ width: '10%' }"
                             align="center">
            </el-table-column>
            <el-table-column prop="remindCnv"
                             label="提示CNV"
                             :style="{ width: '10%' }"
                             align="center">
            </el-table-column>
            <el-table-column prop="chromLocation"
                             label="染色体位置"
                             :style="{ width: '10%' }"
                             align="center">
            </el-table-column>
            <el-table-column prop="resultInfo"
                             label="结果说明"
                             align="center">
            </el-table-column>

          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getPatient } from "@/api/check/patient";
import { getReceiveItemDateList,getItemByReceiveDate } from "@/api/check/item";
import { getSampleList } from "@/api/check/sample";
export default {
  data () {
    return {
      patient: {

      },
      item: {},
      date: [

      ],
      tableData: [],
      active: "",

      patientQuery: {

      }
    };
  },
  created () {
    const id = this.$route.query.id;
    //根据患者列表的id获取患者的信息
    getPatient(id).then(response => {
      this.patient = response.data;
      //根据受检人手机号获取所有的不重复送检时间
      var sjdwName = response.data.sjdwName == undefined ? "1" : response.data.sjdwName;
      var patientPhone = response.data.patientPhone;
      if (patientPhone == undefined || patientPhone == "") {
        this.$modal.msgError("受检人手机号不能为空");
        return false;
      } else {
        var that = this;
        var form = {};
        this.patientQuery.sjdwName = sjdwName;
        this.patientQuery.patientPhone = patientPhone;
        //根据送检单与受检人手机号获取时间集合
        getReceiveItemDateList(that.patientQuery).then(response => {
          var data = response.data
          if (data.length > 0) {
            that.date = response.data
            that.datechange(response.data[0]);
          }
        });
      }

    });

  },
  methods: {
    goBack (row) {
      this.$router.push({
        path: '/check/patient',
      })
    },
    datechange (item) {
      var that = this;
      this.active = item.receive_sample_date
      var receiveSampleDate = item.receive_sample_date;
      that.patientQuery.receiveSampleDate = receiveSampleDate;
      getItemByReceiveDate(that.patientQuery).then(response => {
        var data = response.data
        if(data.length > 0){
          that.item = data[0]
          that.patientQuery.sampleDecWay =  data[0].sampleDecWay
          getSampleList(that.patientQuery).then(response => {
            var data = response.data
            if (data.length > 0) {
              that.tableData = data
            }
          });
        }
      });
    }
  }

};
</script>

<style lang="scss" scoped>
.detail {
  height: 100%;
  overflow: hidden;
  .back {
    .el-icon-arrow-left {
      color: #979797;
      cursor: pointer;
    }
    span {
      font-size: 14px;
      font-family: Source Code Pro-Regular, Source Code Pro;
      font-weight: 400;
      color: #1f2329;
      line-height: 22px;
    }
  }


  .el-row {
    // padding: 20px;
    height: 100%;
    .el-col-5 {
      .box-card {
        width: 100%;
        height: calc(100vh - 100px);
        h4 {
          margin: 0px;
          font-size: 20px;
          font-family: Source Code Pro-Bold, Source Code Pro;
          font-weight: bold;
          color: #1f2329;
          margin-bottom: 10px;
        }
      }
    }
  }
  ::v-deep.el-table .el-table__cell {
    padding: 0;
  }
  ::v-deep.el-table--medium .el-table__cell {
    padding: 0;
  }
  .infor {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 12px 0;
    p {
      display: flex;
      margin: 0;
      flex: wrap;
      width: 33%;
      font-weight: bold;
      font-size: 14px;
      font-weight: 600;
      color: #828282;
      line-height: 32px;
      > span {
        font-size: 14px;
        font-family: Source Code Pro-Regular, Source Code Pro;
        font-weight: 400;
        color: #1f2329;
        min-width: 50px;
        margin-right: 10px;
      }
      // p {
      //   margin: 3px 0;
      // }
    }
  }
  .btn {
    display: flex;
    overflow: auto;
    padding: 0 0 10px 0;
  }
  .box1 {
    border-bottom: 1px solid #e7e3e3;
    .txt {
      display: flex;
      height: 30px;
      align-items: center;
      p {
        color: #8c8c8c;
        margin: 6px 0;
        font-size: 14px;
        white-space: nowrap;
        margin-right: 10px;
      }
      > span {
        min-width: 100px; /* 定义文本容器的宽度 */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px;
        font-weight: 400;
        cursor: pointer;
      }
    }
  }

  .active {
    background: #aa2290;
    color: #fff;
    cursor: pointer;
  }
}

::v-deep.el-card__body {
  //spadding: 20px;
}
</style>
